<template>
	<view class="p-2 bg-light content">
		<!-- 买方需求商品详情 -->
		<view class="bg-white my-2 p-2 cont">
			<text class="h3 font-weight-bold">订单信息</text>
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">商品图片</uni-th>
					<uni-th align="center">商品名称</uni-th>
					<uni-th align="center">商品单价</uni-th>
					<uni-th align="center">商品数量</uni-th>
					<uni-th align="center">商品金额</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td align="center">
						<image style="width: 100rpx;height: 100rpx;" v-if="Goods.Picture_URL!= undefined"
							:src="Domain_IMG + Goods.Picture_URL"></image>
					</uni-td>
					<uni-td align="center">{{Goods.Article_Name}}</uni-td>
					<uni-td align="center">￥{{Number(Goods.Amount).toFixed(2)}}</uni-td>
					<uni-th align="center">{{Quantity}}{{Goods.Unit}}</uni-th>
					<uni-th align="center">￥{{(Number(Goods.Amount)*Number(Quantity)).toFixed(2)}}</uni-th>
				</uni-tr>
			</uni-table>
		</view>
		<!-- 买方信息 -->
		<view class="bg-white my-2 p-2 cont">
			<text class="h3 font-weight-bold">买方信息</text>
			<view class="p-2">
				<uni-forms :modelValue="form" ref="formData">
					<uni-forms-item label-width="100" name="Buyer_Contact" label="收货人:">
						<uni-easyinput v-model.trim="form.Buyer_Contact" type="text" placeholder="请输入收货人姓名" />
					</uni-forms-item>
					<uni-forms-item label-width="100" name="Buyer_Contact_Phone" label="手机号:">
						<uni-easyinput v-model.number="form.Buyer_Contact_Phone" type="text" placeholder="请输入收货人手机号" />
					</uni-forms-item>
					<uni-forms-item label-width="100" label="地址:">
						<uni-data-picker @change="Addresschange" v-if="Address.length!=0" style="width: 500rpx;"
							v-model="address" :map="{text:'text',value:'value'}" :localdata="Address"
							placeholder="请选择地址"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label-width="100" name="Buyer_Contact_Address" label="详情地址:">
						<uni-easyinput v-model.trim="form.Buyer_Contact_Address" type="text" placeholder="请输入详情地址" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<!-- 交收方式 -->
		<view class="bg-white my-2 p-2 cont">
			<text class="h3 font-weight-bold">交收方式</text>
			<view class="p-2">
				<uni-forms :rules="rules" :modelValue="form" ref="formData1">
					<uni-forms-item label-width="100" name="Payment_SerialNumber" label="打款方式:">
						<uni-data-select placeholder="请选择打款方式" v-model="form.Payment_SerialNumber"
							:localdata="Data.Payment" @change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label-width="100" name="Transport_SerialNumber" label="运输方式:">
						<uni-data-select placeholder="请选择运输方式" v-model="form.Transport_SerialNumber"
							:localdata="Data.Shipment" @change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label-width="100" name="Shipment_SerialNumber" label="装运方式:">
						<uni-data-select placeholder="请选择装运方式" v-model="form.Shipment_SerialNumber"
							:localdata="Data.Transport" @change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label-width="100" label="付款周期:">
						<uni-easyinput :disabled="true" v-model.trim="Goods.Trading_Name" type="text"
							placeholder="请输入付款周期" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<!-- 付款周期细则 -->
		<view class="bg-white my-2 p-2 cont">
			<text class="h3 font-weight-bold">付款周期细则</text>
			<view class="">
				<view class="flex flex-column">
					<view v-for="(item, i) in Data.Paystages" :key="i" class="flex flex-column m-1 p-1 font-md"
						style="justify-content: space-evenly">
						<view class="flex align-center mt-1">
							<text>付款{{ i + 1 }}阶段</text>
							<text>{{ item.Trading_Explain }}</text>
						</view>
						<view class="flex align-center mt-1">
							<text>付款额度(%):</text>
							<text class="text-danger">{{ item.Trading_Amount }}%</text>
						</view>
						<view class="flex align-center mt-1">
							<text>最晚付款时间:</text>
							<text class="text-success">{{ item.Trading_Detail_Name }}</text>
							<text class="text-success">{{ item.Trading_Date }}天</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交订单 -->
		<view class="bg-white p-2">
			<button :loading="loading" class="uni-button" type="primary" size="default"
				@click="handleSubmit('formData')">提交订单</button>
		</view>
	</view>
</template>

<script>
	import Tradingchat from "@/components/Tradingchat2/Tradingchat.vue";
	import {
		GroupCheckStockAction,
		setGroupTransactionAction
	} from '@/api/group.js'
	import {
		getAddAction
	} from '@/api/global.js'
	import times from "@/mixins/time.js";
	const app = getApp();
	const {
		Address
	} = data222();
	import {
		data222
	} from "@/static/js/data.js";
	export default {
		onLoad(e) {
			let token = uni.getStorageSync("token");
			this.Enterprise_Info_SerialNumber = uni.getStorageSync("enterprise");
			let pages = getCurrentPages();
			this.LoginUrl = pages[pages.length - 1].$page.fullPath;
			this.form.Buyer_Contact_Phone = uni.getStorageSync('use')
			this.form.Buyer_Contact = uni.getStorageSync('username')
			this.Goods = JSON.parse(decodeURIComponent(e.Goods))
			this.Data = JSON.parse(decodeURIComponent(e.data))
			this.Data.Payment.forEach(item => {
				item.text = item.Payment_Name
				item.value = item.Payment_SerialNumber
			})
			this.Data.Transport.forEach(item => {
				item.text = item.Transport_Name
				item.value = item.Transport_SerialNumber
			})
			this.Data.Shipment.forEach(item => {
				item.text = item.Shipment_Name
				item.value = item.Shipment_SerialNumber
			})
			this.Quantity = e.num
		},
		components: {
			Tradingchat,
		},
		data() {
			return {
				LoginUrl: "",
				disabled: false,
				loading: false,
				NeedDetail: {},
				Domain_IMG: app.globalData.Domain_IMG,
				Payment: [],
				Shipment: [],
				Transport: [],
				Paystages: [{
					Trading_Detail_Name: "",
				}, ],
				num: 0,
				min: 0,
				max: 1,
				Quantity: 0,
				Goods: {},
				Data: {},
				Enterprise_Info_SerialNumber: "",
				form: {
					Group_Transaction_SerialNumber: "", //主键
					Group_Purchasing_SerialNumber: "", //流水号
					Quantity: "", //总量
					Amount: "", //钱
					Submission_Time: "", //时间
					Shipment_SerialNumber: "",
					Transport_SerialNumber: "",
					Payment_SerialNumber: "",
					Buyer_Contact: "", //买主姓名
					Buyer_Contact_Phone: "", //买主手机号
					Buyer_Contact_Address: "", //买主地址
					Buyer_Enterprise_Info_SerialNumber: "", //买主公司编号
					Enterprise_Info_SerialNumber: "", //卖家公司编号
					Children: {
						group_transaction_paystages: [{
							Group_Paystages_SerialNumber: "",
							Group_Transaction_SerialNumber: "",
							Trading_Name: "",
							Trading_Amount: "",
							Trading_Date: "",
							Amount: 100,
							Collection_Amount: 0
						}]
					}
				},
				rules: {
					Buyer_Contact: {
						rules: [{
								required: true,
								errorMessage: "请输入买方姓名",
							},
							{
								minLength: 1,
								maxLength: 5,
								errorMessage: "姓名长度在 {minLength} 到 {maxLength} 个字符",
							},
						],
					},
					Buyer_Contact_Phone: {
						rules: [{
								required: true,
								errorMessage: "请输入卖方手机号",
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let iphoneReg = /^1[3-9]\d{9}$/
									if (!iphoneReg.test(value)) {
										callback('手机号码格式不正确，请重新填写')
									}
									return true
								}
							}
						]
					},
					Buyer_Contact_Address: {
						rules: [{
							required: true,
							errorMessage: "请输入详细地址",
						}, ],
					},
					Payment_SerialNumber: {
						rules: [{
							required: true,
							errorMessage: "请选择打款方式",
						}, ],
					},
					Transport_SerialNumber: {
						rules: [{
							required: true,
							errorMessage: "请选择运输方式",
						}, ],
					},
					Shipment_SerialNumber: {
						rules: [{
							required: true,
							errorMessage: "请选择装运方式",
						}, ],
					},
				},
				//测试
				Address: Address(),
				address: [],
				addressDetail:'',
			};
		},
		onReady() {
			this.$refs.formData.setRules(this.rules)
		},
		methods: {
			async CheckStock(data) {
				const res = await GroupCheckStockAction(data)
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/My/Login'
					})
				} else if (res.Status == 'success') {
					console.log(res);
					this.form.Submission_Time = times.nowtime()
					this.form.Buyer_Enterprise_Info_SerialNumber = uni.getStorageSync('enterprise')
					this.form.Enterprise_Info_SerialNumber = this.Goods.Enterprise_Info_SerialNumber
					this.form.Group_Purchasing_SerialNumber = this.Goods.Group_Purchasing_SerialNumber
					this.form.Quantity = this.Quantity
					this.form.Amount = this.Goods.Amount
					if (this.Goods.Trading_Name == '按阶段付款') {
						this.form.Children.group_transaction_paystages = this.Data.Paystages
						this.form.Children.group_transaction_paystages.forEach(item => {
							item.Group_Paystages_SerialNumber = ''
							item.Group_Transaction_SerialNumber = ''
							item.Amount = item.Trading_Amount * this.Goods.Amount * this.Quantity / 100,
								item.Collection_Amount = 0,
								item.Collection_Date = ''
						})
					} else {
						this.form.Children.group_transaction_paystages = [{
							Amount: this.Goods.Amount * this.Quantity,
							Collection_Amount: 0,
							Group_Paystages_SerialNumber: '',
							Group_Transaction_SerialNumber: '',
							Trading_Detail_SerialNumber: this.Data.Paystages[0].Trading_Detail_SerialNumber,
							Trading_Amount: 100,
							Trading_Date: this.Data.Paystages[0].Trading_Date,
							Trading_Explain: "全额支付",
							Collection_Date: "",
						}]
					}
					let data = {
						Data: JSON.stringify({
							"group_transaction": [this.form]
						}),
					}
					console.log(this.form)
					this.GetAdd(data)
				} else {
					this.loading = true
					uni.showToast({
						title: '该商品库存不足!无法购买',
						icon: 'none'
					})
					uni.hideLoading()
				}
			},
			async GetAdd(data) {
				const res = await setGroupTransactionAction(data)
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/My/Login'
					})
				} else if (res.Status == 'success') {
					console.log(res)
					let group_message_buyer = {
						Group_Message_SerialNumber: "",
						Group_Transaction_SerialNumber: res.Data,
						Cause: "提交成功",
						Submission_Time: times.nowtime(),
						Enterprise_Info_SerialNumber: uni.getStorageSync('enterprise'),
						Seller_Type: "0"
					}
					let group_message_seller = {
						Group_Message_SerialNumber: "",
						Group_Transaction_SerialNumber: res.Data,
						Cause: "申请提示",
						Submission_Time: times.nowtime(),
						Enterprise_Info_SerialNumber: this.form.Enterprise_Info_SerialNumber,
						Seller_Type: "1"
					}
					let group_message = []
					group_message.push(group_message_buyer)
					group_message.push(group_message_seller)
					let data = {
						Data: JSON.stringify({
							"group_message": group_message
						}),
						token: uni.getStorageSync('token'),
					}
					this.submitMessage(data)
				} else {
					uni.showToast({
						title: '系统异常,请稍后重试',
						icon: 'none'
					})
					uni.hideLoading()
					this.loading = false
				}
			},
			//给交易双方发消息
			async submitMessage(data) {
				const res = await getAddAction(data)
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/My/Login'
					})
				} else if (res.Status == 'success') {
					console.log(res);
					uni.hideLoading()
					uni.showToast({
						title: '提交成功!,等待对方审核中',
						icon: 'none'
					})
					this.loading = false
					uni.navigateBack()
				} else {
					uni.showToast({
						title: '系统异常,请稍后重试',
						icon: 'none'
					})
					uni.hideLoading()
					this.loading = false
				}
			},
			Addresschange(e) {
				console.log(e.detail.value[0])
				this.addressDetail = e.detail.value[0].text+'/'+e.detail.value[1].text+'/'+e.detail.value[2].text+'/'
			},
			change(e){
				console.log(e)
			},
			handleSubmit(formName) {
				this.$refs[formName].validate().then(res => {
					console.log(this.form.Buyer_Contact_Address)
					if(this.addressDetail==''){
						uni.showToast({
							title: '请选择您的地址',
							icon: 'none'
						})
						return
					}
					if(this.form.Payment_SerialNumber==''){
						uni.showToast({
							title: '请选择打款方式',
							icon: 'none'
						})
						return
					}
					if(this.form.Transport_SerialNumber==''){
						uni.showToast({
							title: '请选择运输方式',
							icon: 'none'
						})
						return
					}
					if(this.form.Shipment_SerialNumber==''){
						uni.showToast({
							title: '请选择装运方式',
							icon: 'none'
						})
						return
					}
					this.form.Buyer_Contact_Address = this.addressDetail + this.form.Buyer_Contact_Address
					console.log(this.form)
					const this_ = this
					if (!this_.loading) {
						uni.showModal({
							title: '平台通知',
							content: '平台会收取交易双方各1%交易额度的手续费',
							cancelText: "我再想想",
							success(res) {
								if (res.cancel) {
									this_.loading = false
									uni.showToast({
										title: '已取消',
										icon: 'none'
									})
								}
								if (res.confirm) {
										this_.loading = true
										let data = {
											Group_Purchasing_SerialNumber: this_.Goods
												.Group_Purchasing_SerialNumber,
											Quantity: this_.Quantity,
											token: uni.getStorageSync('token'),
										}
										uni.showLoading({
											title: '提交中...',
										})
										this_.CheckStock(data)
								}
							}
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请检查页面信息',
						icon: 'none'
					})
				})
			},
		},
	};
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		box-sizing: border-box;

		.cont {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 25rpx;
			box-sizing: border-box;
			margin: 0 0 30rpx 0;

			.title1 {
				font-size: 35rpx;
				padding: 20rpx;
				box-sizing: border-box;

				view {
					margin: 20rpx 0;
				}

				.I {
					width: 70%;
					display: inline-block;
					margin: 0 0 0 10rpx;
				}
			}
		}
	}
</style>